<template>
	<common-page>
		<view class="page-title">跌倒监测</view>
		<view class="card-wrap">
			<view class="item flex justify-between">
				<text class="txt">跌倒监测</text>
				<u-switch v-model="formData.fallCheck" :size="20"></u-switch>
			</view>
			<view class="item flex justify-between">
				<text class="txt">跌倒报警时间</text>
				<view class="flex-1 flex justify-end">
					<view class="" style="width: 80%;">
						<u-slider  v-model="formData.fallWarnTime" :min="minVal" :max="maxVal"></u-slider>
					</view>
					<text class="color-999 font-24">{{ formData.fallWarnTime }}秒</text>
				</view>
			</view>
			<view class="item flex justify-between">
				<text class="txt">短信通知</text>
				<u-switch v-model="formData.fallSmsNotice" :size="20"></u-switch>
			</view>
		</view>
		<view class="page-title">睡眠监测</view>
		<view class="card-wrap">
			<view class="item flex justify-between">
				<text class="txt">睡眠监测</text>
				<u-switch v-model="formData.sleepMonitoring" :size="20"></u-switch>
			</view>
			<view class="item flex justify-between">
				<text class="txt">睡姿监测</text>
				<u-switch v-model="formData.sleepPostureMonitoring" :size="20"></u-switch>
			</view>
			<view class="item flex justify-between">
				<text class="txt">呼吸暂停预警</text>
				<u-switch v-model="formData.respiratoryPauseWarning" :size="20"></u-switch>
			</view>
			<view class="item flex justify-between">
				<text class="txt">短信通知</text>
				<u-switch v-model="formData.sleepSmsNotice" :size="20"></u-switch>
			</view>
		</view>
		<u-button type="primary" text="完成" color="#417CE9" class="btn-next" @click="bindSubmit"></u-button>
	</common-page>
</template>

<script>
export default {
	data() {
		return {
			maxVal: 60,
			minVal: 0,
			formData: {
				fallCheck: false,
				fallWarnTime: 10,
				fallSmsNotice: false,
				sleepMonitoring: false,
				sleepPostureMonitoring: false,
				respiratoryPauseWarning: false,
				sleepSmsNotice: false
			},
			deviceSn: ''
		};
	},
	onLoad(option) {
		this.deviceSn = option.deviceSn;
		this.getDeviceInfoData();
	},
	methods: {
		// 获取设备详情
		async getDeviceInfoData() {
			const params = {
				deviceSn: this.deviceSn
			};
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-device/getDeviceInfo', params));
			if (err) return;
			for (const key in this.formData) {
				this.formData[key] = !!result[key];
			}
			this.formData.fallWarnTime = this.formData.fallWarnTime ? this.formData.fallWarnTime : 10;
		},
		// 提交
		async bindSubmit() {
			const params = Object.assign(this.formData, {
				deviceSn: this.deviceSn
			});
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-device/updateDeviceInfo'));
			if (err) return;
			uni.$u.toast('更新成功');
		}
	}
};
</script>

<style lang="scss" scoped>
.page-title {
	line-height: 80rpx;
	color: #1E2531;
	font-weight: bold;
	font-size: 30rpx;
}
.card-wrap {
	padding: 0 40rpx;
	background-color: #fff;
	border-radius: 20rpx;
	.item {
		height: 100rpx;
		border-bottom: 1px solid #E3E3E3;
		&:nth-last-of-type(1) {
			border-bottom: none;
		}
		.txt {
			color: #1E2531;
			font-size: 30rpx;
		}
	}
}
::v-deep .u-button {
	margin-top: 80rpx;
	border-radius: 60rpx !important;
	&.u-button--disabled {
		background-color: #D7D7D7 !important;
		border-color: #D7D7D7 !important;
	}
	.u-button__text {
		font-size: 32rpx !important;
		font-weight: bold;
	}
}
</style>
